<template>
  <div>
    <head-top></head-top>
    <div class="table_container">
       <el-table
         :columns="columns"
          :data="tableList"
          v-loading="loading"
          element-loading-text="小猪猪正在玩命加载中，请稍候哦。。。"
          highlight-current-row
          style="width: 100%;text-align: center">
         <el-table-column v-for="(column, index) in columns" :key="index" :label="column.text" :width="column.width">
           <template slot-scope="scope">
             <template v-if="column.useSlot">
               <template v-if="column.value === 'operate'">
                 <el-button @click="del(scope, scope.row)" type="text">删除</el-button>
                 <el-button type="text" @click="test(scope.$index, scope.row)">编辑</el-button>
               </template>
             </template>
             <template v-else>
               {{ scope.row[column.value] }}
             </template>
           </template>
         </el-table-column>
      </el-table>
      <div class="Pagination" style="text-align: left;margin-top: 10px;">
        <el-pagination
          v-if="total && total > 0"
          :current-page="currentPage"
          :page-sizes="[8, 16, 32, 64]"
          :page-size="pageSize"
          :total="total"
          layout="slot, jumper, sizes, next, pager, prev"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
          <slot>
            <span>
              共{{ pageCount }}页 当前为第{{ currentPage }}页
            </span>
          </slot>
        </el-pagination>
        <el-dialog
          :visible.sync="dialogVisible"
          :before-close="handleClose"
          :append-to-body="true"
          title="修改用户信息"
          width="40%"
        >
          <!--<UserEdit :testData="testData" />-->
          <el-form :model="userEditForm" class="form-container">
            <div>
              <el-row>
                <el-col :span="24" >
                  <div>
                    <span class="c-form-info__label-xing">* </span>用户ID：
                  </div>
                  <el-form-item>
                    <el-input readonly v-model="userEditForm.userId" placeholder="请输入用户ID"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" >
                  <div>
                    <span class="c-form-info__label-xing">* </span>联系电话：
                  </div>
                  <el-form-item class="c-form-info__item c-form-info__item80">
                    <el-input v-model="userEditForm.phoneNumber" placeholder="请输入电话方式"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-col :span="24" >
                  <div>
                    <span class="c-form-info__label-xing">* </span>注册日期:
                  </div>
                  <el-form-item>
                    <el-input readonly v-model="userEditForm. registerDate" placeholder="请输入注册日期" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" >
                  <div>
                    <span class="c-form-info__label-xing">* </span>城市:
                  </div>
                  <el-form-item>
                    <el-input readonly v-model="userEditForm.city" placeholder="请选择城市" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit()">修改</el-button>
        </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import HeadTop from '../components/head-top'
const initForm = {
  userId: '',
  phoneNumber: '',
  registerDate: '',
  city: ''
}
 export default {
   components: { HeadTop },
   name: 'userlist',
   data () {
     return {
       testData: '',
       collapse: true,
       dialogVisible: false,
       tableData: [],
       loading: true,
       currentRow: null,
       userEditForm: Object.assign({}, initForm),
       total: 30,
       pageSize: 8,
       currentPage: 1,
       columns: [
         {
           text: '用户ID',
           value: 'userId',
           width: 150
         },{
         text: '用户名',
         value: 'phoneNumber',
         width: 150
       },{
         text: '注册日期',
         value: 'registerDate',
         width: 300
       },{
         text: '注册地址',
         value: 'city',
         width: 150
       },{
         text: '操作',
         value: 'operate',
         width: 180,
         fixed: 'right',
         useSlot: true
       }
         ]
     }
   },
   computed: {
     tableList() {
       return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
     }
   },
   created(){
       var url = this.HOME + '/userlist/findalluser';
       this.$axios.get(url)
         .then(res => {
         console.log(res.data.list);
         this.tableData = res.data.list;
         this.loading = false;
       }).catch(error => {
         console.log(error);
     });
     },
   methods: {
     // 切换每页显示条数
     handleSizeChange(val) {
       this.currentPage = 1
       this.pageSize = val
     },
     // 当前页改变
     handleCurrentChange(val) {
       this.currentPage = val
     },
     del(scope, row) {
       if (!scope.row.phoneNumber){
         this.tableData(scope.$index, 1)
       } else {
         this.$confirm('确认是否删除','提示',{
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
           center: true
         })
           .then(() => {

           this.$axios.post(this.HOME + '/userlist/deluser',{phoneNumber: scope.row.phoneNumber}).then(res => {
           if(res.data.judge === true) {
           this.$message.success('删除成功')
           return this.tableData.splice(row,1);
         } else {
           this.$message.warning(res.data.msg)
         }
       })
       })
       .catch(() => {
           this.$message({type: 'info',
           message: '已取消删除'
         })
       })
       }
     },
     // 编辑账号
     test(index, row) {
       this.userEditForm = row
       this.userEditForm.phoneNumber = row.phoneNumber
       this.dialogVisible = true
     },
     handleClose(done) {
       this.$confirm('确认关闭？')
         .then(_ => {
         done()
         //location.reload()
     })
     .catch(_ => {
        // location.reload()
     })
     },
     edit() {
       this.dialogVisible = false
       //location.reload()
     }
   }
    }
</script>

<style lang="less">
  @import '../../style/mixin';
  .table_container{
    padding: 20px;
  }
</style>
